<template>
  <div>
    <!--    <el-button type="primary" @click="delrouterall()">click</el-button>-->


    <div style="margin: 10px 0">
      <el-button size="small" type="primary" style="margin: 0 10px" @click="showNewForm">新增<i
          class="el-icon-circle-plus"></i></el-button>
      <!--      <el-button type="primary" style="margin: 0 10px" @click="handleDelBatch">批量导入<i-->
      <!--          class="el-icon-upload"></i></el-button>-->
<!--      <el-upload-->
<!--          :show-file-list="false"-->
<!--          style="display: inline-block"-->
<!--          class="upload-demo"-->
<!--          action="xx"-->
<!--          :http-request="uploadFile"-->
<!--          ref="upload"-->
<!--      >-->
<!--        <el-button size="small" type="primary" style="margin: 10px 10px">批量导入<i-->
<!--            class="el-icon-upload"></i></el-button>-->
<!--      </el-upload>-->
      <el-popconfirm
          confirm-button-text='确定'
          cancel-button-text='取消'
          icon="el-icon-info"
          icon-color="red"
          title="确定删除吗？"
          @confirm="handleDelBatch"
      >
        <el-button size="small" type="danger" slot="reference" style="margin: 10px 10px">
          批量删除
          <i class="el-icon-remove-outline"></i>
        </el-button>
      </el-popconfirm>
      <div style="float: right">
        <el-input style="width: 200px; margin: 0 10px 0 10px" placeholder="请输入设备类型名"
                  suffix-icon="el-icon-search"
                  v-model="devtypename"/>

        <el-button type="primary" @click="search">搜索</el-button>
      </div>
    </div>


    <el-dialog title="新增" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="formrules" ref="form">
        <el-form-item label="设备类型名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="编辑" :visible.sync="editFormVisible">
      <el-form :model="editform" :rules="editFormRules" ref="editform">
        <el-form-item label="设备名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="editform.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEidt">确 定</el-button>
      </div>
    </el-dialog>

    <el-table ref="table" @selection-change="handleSelectionChange" :data="tableData"
              style="margin: 10px; width: 1600px" border stripe>
      <el-table-column width="50" type="selection">
      </el-table-column>
      <el-table-column type="index" label="序号" width="60">
      </el-table-column>

      <el-table-column prop="id" label="ID" width="60" v-if="false">
      </el-table-column>
      <el-table-column prop="name" label="设备类型名" width="200">
      </el-table-column>

      <el-table-column prop="#" label="操作">
        <template slot-scope="scope">

          <el-button size="small" type="primary" @click="showEditForm(scope.row)">编辑<i
              class="el-icon-edit"></i></el-button>
          <!--              <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>-->

          <el-popconfirm
              style="margin: 0 10px"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="handleDel(scope.row.id)"
          >
            <el-button size="small" type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i>
            </el-button>
          </el-popconfirm>
<!--          <el-button size="small" type="success" slot="reference" @click="$router.push('/jc/dev/ywlxwh/'+scope.row.id)">业务类型配置 <i class="el-icon-set-up"></i>-->
<!--          </el-button>-->
<!--          <el-button size="small" plain type="primary" @click="$router.push('/sys/menu/'+scope.row.id)">菜单详情<i class="el-icon-remove-outline"></i>-->
<!--          </el-button>-->

        </template>
      </el-table-column>
    </el-table>


    <div class="block" style="padding: 5px">
      <el-pagination

          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100,500,1000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

  </div>

</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

import VueRouter from 'vue-router'
import HomeView from "@/views/HomeView.vue";


export default {
  created() {

    // service.get('/devtype/getAll', {}).then(
    //     response => {
    //       if (response.data.code == 20000) {
    //         this.devtypeArr = response.data.data
    //       }
    //     }
    // )
    this.load();
  },
  data() {
    return {

      devtypename: null,

      devtypeArr: [],
      tableData: [],
      selectedRows: [], // 用来存储选中行的数据
      pageSize: 10,
      total: 100,
      currentPage: 1,
      dialogFormVisible: false,
      editFormVisible: false,
      form: {
        name: ''
      },
      formrules: {
        name: [
          {required: true, message: '请输入设备类型名',}
        ]
      },
      editform: {
        id: null,
        name: ''
      },
      editFormRules: {
        name: [
          {required: true, message: '请输入设备类型名',}
        ]
      },


      formLabelWidth: '120px'
    }
  },
  methods: {

    load() {
      service.get('/devtype/getpage', {
        params: {
          pagesize: this.pageSize,
          pagenum: this.currentPage,
          devtypename: this.devtypename,
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.tableData = response.data.data.records;
              this.total = response.data.data.total;
              this.currentPage = response.data.data.current;
              this.pageSize = response.data.data.size;
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      );


    },

    dwchange(dw) {
      console.log(this.editform.dwid)
    },

    handleSelectionChange(selection) {
      // console.log(selection)
      // this.selectedRows = selection.map(row => row._row);
      this.selectedRows = selection
      // console.log(this.selectedRows)
    },

    showNewForm() {
      this.form = {}
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs["form"].clearValidate()
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    },

    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },

    handleSave() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        let saveform = {}
        saveform.name = this.form.name
        service.post('/devtype/save', saveform).then(response => {
          if (response.data.code == 20000) {
            this.$message.success('success!');
            this.dialogFormVisible = false
            this.load()
          } else {
            this.$message.error("error")
            this.dialogFormVisible = false
          }
        })
      });
    },
    showConfirmForm(row) {

    },

    showEditForm(row) {
      // this.editform = {}
      this.editform.id = row.id
      this.editform.name = row.name
      this.editFormVisible = true
      this.$nextTick(() => {
        this.$refs["editform"].clearValidate()
      })
    },

    handleEidt() {
      this.$refs["editform"].validate((valid) => {
        if (!valid) {
          return;
        }
        let editformTmp = {}
        editformTmp.id = this.editform.id
        editformTmp.name = this.editform.name
        service.post('/devtype/edit', editformTmp).then(response => {
          if (response.data.code == 20000) {
            this.$message.success('success!');
            this.editFormVisible = false
            this.load()
          } else {
            this.$message.error("error")
            this.editdialogFormVisible = false
          }
        })
      });
    },
    handleDel(id) {
      service.delete('/devtype?id=' + id).then(response => {
        if (response.data.code == 20000) {
          this.$message.success('删除成功!');
          this.load()
        } else {
          this.$message.error("error")
        }

      })
    },
    search() {
      this.load()
    },
    handleDelBatch() {
      service.post('/devtype/delbatch', this.selectedRows).then(response => {
        if (response.data.code == 20000) {
          this.$message.success('删除成功!');
          this.load()
        } else {
          this.$message.error("error")
        }
      })
    },
    uploadFile(param) {
      //param中的file才是真正的文件体，用于传入axios上传方法的参数

      const header = {"content-type": "multipart/form-data"} //请求头设置，没必要加，axios看到formdata类型，会自动加上，
      let formData = new FormData();
      formData.append("file", param.file);
      service.post('/dev/import', formData).then(res => {
        if (res.data.code == 20000) {
          this.$message.success('导入成功!');
          this.load()
        } else {
          this.$alert(res.data.message, '导入错误！', {
            confirmButtonText: '确定',
          })
          this.load()
        }
      }, error => {
        this.$alert(error.message, '错误！', {
          confirmButtonText: '确定',
        })
      })
    },

  }
}
</script>

<style scoped>

</style>
